// sass使用$符号来标识变量，多个单词 之间 使用 - 链接。
$hl-color: #f90;
$base-border: 1px solid black;
// 上面我们声明了一个 名为$highlight-color的变量, 我们可以把该变量用在任何位置
#app {
    background-color:  $hl-color;
    border: $base-border
  }
//   3.2.2 变量范围
// 当变量定义在css规则块内，那么该变量只能在此规则块内使用
  $nav-color: #F90;
.nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

// # 编译后 
// .nav {
//   width: 100px;
//   color: #F90;
//   background-color: black;
// }

// 3.3 嵌套语法
// 和less一样,scss同样支持嵌套型的语法
#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }
//   转化后
//   #content {
//     article {
//       h1 { color: #1dc08a }
//       p {  font-style: italic; }
//       a {
//         color: blue;
//         &.active { color: red }
//       }
//     }
//     aside { background-color: #f90 }
//   }


// 3.4 &父选择器
#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &.active { color: red }
      }
    }
    aside { background-color: #f90 }
  }


//   3.5 @mixin 定义模块
// @mixin 定义重复的模块，@include 引入模块
@mixin dan {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  
  .myMixin {
    p {
      @include dan;
      width: 100px;
    }
  }

// 3.6  @mixin 可以当作函数 接收参数
@mixin dan($fz) {
    font-size: $fz;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .myMixin {
    p {
      @include dan(32px);
      width: 100px;
    }
  } 

//   3.7 @each 类似于 for循环
// 主轴
$flex-jc: (
  'start': flex-start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly,
);

// @each 进行遍历
@each $flexKey, $flexValue in $flex-jc { 
  .jc-#{$flexKey} {
    justify-content: $flexValue;
  }
}